<template>
    <div style="padding: 0 20px;">
        <Tabs value="name1">
            <TabPane label="动态绑定数组值" name="tree1" style="height: 800px;">
                <Row style="height: 100%;">
                    <i-col :span="8" class="box left-content">
                        <Tree :data="tree1.data1" :render="renderContent" style="padding: 10px 20px;" class="demo-tree-render" @on-select-change="selectRow"></Tree>
                    </i-col>
                    <i-col :span="15" class="box">
                        <!--
                        说明:
                            1. 如果需要控制这里的长度动态变化, 可以搭配Row, i-col实现.
                        -->
                        <Form ref="node1" style="margin: 20px 40px;" label-position="right" :label-width="100" :disabled="tree1.nowEditNode.id === undefined">
                            <FormItem label="标题">
                                <Input type="text"
                                       class="input-item"
                                       placeholder="会话编号"
                                       clearable
                                       v-model="tree1.nowEditNode.title"
                                />
                            </FormItem>
                            <FormItem label="名称">
                                <Input type="text"
                                       class="input-item"
                                       placeholder="会话编号"
                                       clearable
                                       v-model="tree1.nowEditNode.name"
                                />
                            </FormItem>
                            <FormItem label="数组选项">
                                <CheckboxGroup v-model="tree1.nowEditNode.hobby">
                                    <Checkbox :label="1">数字1</Checkbox>
                                    <Checkbox :label="3">数字3</Checkbox>
                                </CheckboxGroup>
                            </FormItem>
                        </Form>
                        {{tree1.nowEditNode}}
                    </i-col>
                </Row>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
    // 引入工具类
    import {objectUtil} from '@/util/ObjectUtil';
    export default {
        name: "TreeDemo",
        data() {
            return {
                tree1: {
                    nowEditNode: {},
                    data1: [
                        {
                            title: 'parent 1',
                            expand: true,
                            id: null,
                            name: '',
                            hobby: [],
                            render: (h, { root, node, data }) => {
                                return h('span', {
                                    style: {
                                        display: 'inline-block',
                                        width: '100%',
                                        // 下面的三个属性用来设置超出文本不换行隐藏.
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    }
                                }, [
                                    h('span', [
                                        h('Icon', {
                                            props: {
                                                type: 'ios-folder-outline'
                                            },
                                            style: {
                                                marginRight: '8px',
                                            }
                                        }),
                                        h('span', data.title)
                                    ]),
                                    h('span', {
                                        style: {
                                            display: 'inline-block',
                                            float: 'right',
                                            marginRight: '32px'
                                        }
                                    }, [
                                        h('Button', {
                                            props: Object.assign({}, this.buttonProps, {
                                                icon: 'ios-add',
                                                type: 'primary'
                                            }),
                                            style: {
                                                width: '64px'
                                            },
                                            on: {
                                                click: () => {
                                                    window.console.log(root, node);
                                                    this.append(data)
                                                }
                                            }
                                        })
                                    ])
                                ]);
                            },
                            children: []
                        }
                    ]
                }
            }
        },
        created () {

        },
        mounted() {
            // 这一行相当于设置默认选中第一个节点, 但是会造成没有阴影, 体验不好
            //this.$set(this.$data.tree1, 'nowEditNode', this.$data.tree1.data1[0]);
        },
        methods: {
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%',
                        // 下面的三个属性用来设置超出文本不换行隐藏.
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-add'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.append(data) }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-remove'
                            }),
                            on: {
                                click: () => {
                                    this.remove(root, node, data);
                                }
                            }
                        })
                    ])
                ]);
            },
            append (data) {
                const children = data.children || [];
                children.push({
                    title: 'appended node',
                    expand: true,
                    id: null,
                    name: '',
                    hobby: []
                });
                this.$set(data, 'children', children);
            },
            remove (root, node, data) {
                const parentKey = root.find(el => el === node).parent;
                const parent = root.find(el => el.nodeKey === parentKey).node;
                const index = parent.children.indexOf(data);
                parent.children.splice(index, 1);
            },
            selectRow(root, node) {
                /*
                说明:
                    1. node.selected这个属性用来标识当前节点是选中还是取消选中, 这里的逻辑是如果是选中, 则将这个节点设置到响应
                    式属性中, 否则将当前正在编辑的节点置为空对象.
                 */
                if ( node.selected === false ) {
                    this.$set(this.$data.tree1, 'nowEditNode', {});
                    return;
                }
                window.console.log(2, objectUtil.equal(node, root[0]));
                this.$set(this.$data.tree1, 'nowEditNode', node);
            }
        }
    }
</script>
<!--
说明:
    1. 这里加上scoped就会导致css样式不生效.
-->
<style>
    .box {
        border: 1px solid beige;
        border-radius: 3px;
        height: 100%;
        margin: 0 10px;
        text-align: left;
    }

    .left-content {
        text-align: left;
    }

    .demo-tree-render .ivu-tree-title{
        width: 100%;
    }

</style>